<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名案例</title>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            h2 {
                text-align: center;
            }

            .box {
                width: 600px;
                margin: 50px auto;
                display: flex;
                font-size: 25px;
                line-height: 40px;
            }

            .qs {

                width: 450px;
                height: 40px;
                color: red;

            }

            .btns {
                text-align: center;
            }

            .btns button {
                width: 120px;
                height: 35px;
                margin: 0 50px;
            }
        </style>
    </head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
        <button class="result">重置</button>
    </div><br>
    <p>抽中的人有：<span class="spans"></span></p>

    <script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        // 定时器的全局变量
        let timerId = 0
        // 随机号要全局变量
        let random = 0
        // 抽中人姓名全局变量
        let str = '';
        // 业务1.开始按钮模块
        const qs = document.querySelector('.qs')
        // 1.1 获取开始按钮对象
        const start = document.querySelector('.start')
        // 显示抽中人的标签
        const span = document.querySelector('.spans')
        // 重置标签
        const result = document.querySelector('.result');
        // 1.2 添加点击事件
        start.addEventListener('click', function () {
            timerId = setInterval(function () {
                // 禁用开始按钮
                start.disabled = true;
                // 随机数
                random = parseInt(Math.random() * arr.length)
                // console.log(arr[random])
                qs.innerHTML = arr[random]
            }, 35)
            // 如果数组里面只有一个值了，还需要抽取吗？  不需要  让两个按钮禁用就可以
            if (arr.length === 1) {
                // start.disabled = true
                // end.disabled = true
                start.disabled = end.disabled = true
                str = arr[0];
                span.innerHTML += `${str} `;
            }
        })

        // 2. 关闭按钮模块
        const end = document.querySelector('.end')
        end.addEventListener('click', function () {
            // 保存抽中的人
            str = arr[random];
            span.innerHTML += `${str} `;
            // 结束后开启开始按钮
            start.disabled = false;
            clearInterval(timerId)
            // 结束了，可以删除掉当前抽取的那个数组元素
            arr.splice(random, 1)
        })

        // 重置刷新点击事件
        result.addEventListener('click', function (e) {
            location = location;
        })
    </script>
</body>

</html>